<template>
	<view class='loginContainer'>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="" >
			<view class="topImg">
				<image src="../../static/img/bg.png" alt="" />
			</view>
			<view class="loginBtn" @click="loginBtn">登录</view>
			<view class="register" @click="registerBtn">注册</view>
			<view class='thirdPartyBox'>
				<view class='thirdParty'>第三方快速登录</view>
				<view class='me-fx-row-sb-c loginPicBox'>
					<image src="../../static/img/weixin.png" alt="" />
					<image src="../../static/img/qq.png" alt="" />
				</view>
				<view class="readed">我已阅读<text>《用户协议》</text>和<text>《隐私政策》</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight: 25
			}
		},
		created() {
			this.getSystemStatusBarHeight()
		},
		methods: {
			//获取系统状态栏高度
			getSystemStatusBarHeight: function() {
				// #ifdef APP-PLUS
				var height = plus.navigator.getStatusbarHeight();
				this.barHeight = height / 2;
				console.log(this.barHeight, 'this.barHeight')
				// #endif
				// #ifdef H5
				this.barHeight = 0;
				console.log(this.barHeight, 'this.barHeight0222')
				// #endif
			},
			loginBtn() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			registerBtn() {
				uni.navigateTo({
					url: '../register/register'
				})
			},
		}
	}
</script>

<style>
	.status_bar,.top_view {
		background-color: #824cfe !important;
	}

	.loginContainer {
		background-color: #824cfe;
		width: 100%;
		height: 100%;
	}

	.topImg {
		/* padding: 50% 0 0 0; */
		width: 100%;
		height: 503rpx;
		text-align: center;
	}

	.topImg image {
		display: block;
		width: 100%;
		height: 100%;
		margin: auto;

	}

	.topImg view {
		color: white;
	}

	.register,
	.loginBtn {
		text-align: center;
		margin: -20rpx auto 0;
		line-height: 94rpx;
		font-size: 24rpx;
		width: 630rpx;
		height: 94rpx;
		background: rgba(255, 255, 255, 1);
		opacity: 0.9;
		border-radius: 47rpx;
	}
	.loginBtn,
	.register {
		font-size: 38rpx;
		font-weight: bold;
		color: rgba(92, 20, 255, 1);
	}

	.register {
		background: rgba(255, 255, 255, 1);
		opacity: 0.6;
		border-radius: 47rpx;
		margin: 20rpx auto 0!important;
	}

	.thirdPartyBox {
		width: 70%;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.thirdPartyBox .thirdParty {
		text-align: center;
		color: white;
		font-size: 24rpx;
	}

	.thirdPartyBox .thirdParty::after {
		content: '';
		position: absolute;
		top: 8%;
		left: 45px;
		width: 35px;
		height: 1px;
		background-color: white;

	}

	.thirdPartyBox .thirdParty::before {
		content: '';
		position: absolute;
		top: 8%;
		right: 45px;
		width: 35px;
		height: 1px;
		background-color: white;
	}

	.readed {
		font-size: 20rpx;
		text-align: center;
	}

	.readed text {
		color: white;
	}

	.loginPicBox {
		width: 200rpx;
		height: 80rpx;
		margin: 30rpx auto;
	}

	.loginPicBox image {
		width: 80rpx;
		height: 80rpx;
		/* border-radius: 50%; */

	}
</style>

export default {
data() {
return {

}
},
methods: {

}
}
</script>

<style>
	.container {
		/* 	padding: 20px;
		font-size: 14px;
		line-height: 24px; */
	}
</style>
